<template>
	<div class="con">
		<el-form class="fo" hide-required-asterisk ref="form1" :model="formData" label-width="80px" :rules="rules"  @keyup.enter.native="toUi">
			<h1>胖虎到家 - 登陆界面</h1>
			<h6>稍等一下，胖虎马上就到！！！</h6>
			<el-form-item label="账号" prop="username">
				<el-input v-model="formData.username" style="width: 400px;" placeholder="请输入账号"
					prefix-icon="el-icon-user" ></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="formData.password" type="password" style="width: 400px;" placeholder="请输入密码"
					prefix-icon="el-icon-lock" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="toUi"  >登陆</el-button>
				<el-button @click="qx">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		Form
	} from 'element-ui'
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入账号！',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '账号长度在2-10字符之间！',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,//是否为必填项
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '密码至少3字符！',
							trigger: 'blur'
						},
					]
				}
			}
		},
		methods: {
			toUi() {
				this.$refs['form1'].validate(valid=>{
					if(valid){
						this.$http.post('http://43.143.190.87:8182/login?username='+this.formData.username+'&pwd='+this.formData.password)
						.then(res=>{
							if(res.data.code==1){
								this.$message.success("登陆成功！")
								this.$router.push('/home')//前往主页面路由
							}else{
						this.$message.error("请输入正确的账号密码")
							}
						})
						.catch(error=>{
							this.$message.error("服务器异常")
						})
					}
				})	
			},
			qx() {
				this.$refs['form1'].resetFields();
			}
		}
	}
</script>

<style scoped>
	.con {
		height: 100vh;
		background: url(../assets/胖虎.jpg) no-repeat center;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.fo {
		background-color: rgba(255, 255, 255, 0.8);
		width: 500px;
		padding: 30px 50px;
		margin: 150px auto;
		border-radius: 20px;
	}

	.fo h1 {
		text-align: center;

	}
	.fo h6{
		text-align: center;
		color: red;
		font-family: cursive;
	}
</style>